<template>
  <div class="left">
    <div style="height: 60px">
      <svg-icon
        :name="titleIcon.name"
        :myStyle="titleIcon.style"
        style="padding: 2px"
      />
    </div>
    <div class="main">
      <div>
        <left-icon
          :name="item.meta && item.meta.icon ? item.meta.icon : 'empty'"
          :myStyle="{ fontSize: `40px` }"
          :title="item.meta && item.meta.name ? item.meta.name : '未填写'"
          v-for="(item, index) in routerList"
          :key="index"
          @click="selected(item)"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive } from "vue";
import leftIcon from "./leftIcon.vue";
import { RouteRecordRaw, useRouter } from "vue-router";
import { useStore } from "vuex";

export default defineComponent({
  components: { leftIcon },
  emits: ["handle-route"],
  setup(props: any, { emit }: any) {
    const state = reactive({
      titleIcon: {
        name: "ji",
        style: {
          fontSize: "56px",
        },
      },
    });

    const store = useStore();

    const router = useRouter();
    const routerList = store.getters["router/router"].filter(
      (router: RouteRecordRaw) => {
        return router.meta && !router.meta.hidden;
      }
    );

    // const routerList = JSON.parse(
    //   localStorage.getItem("router") as string
    // ).filter((router: RouteRecordRaw) => {
    //   return router.meta && !router.meta.hidden;
    // });

    // const fullPath = useRouter().currentRoute;
    // console.log("fullPath", fullPath);
    // console.log(useRouter());

    const selected = (val: any) => {
      // emit("handle-route", val);
      router.push(val.path);
      // console.log(useRouter().push("/"));
      // let goPath = val.path;
      // if (val.redirect) {
      //   const redirect = val.redirect;
      //   goPath += redirect;
      //   if (val.children) {
      //     const _list = val.children.filter((item: any) => {
      //       return "/" + item.path === redirect;
      //     });
      //     if (_list.size > 0) {
      //     } else {
      //       reject("路由配置出错");
      //     }
      //     console.log(_list);
      // for (const iterator of val.children) {
      //   if (condition) {

      //   }
      // }
      // }
      // }
    };

    return {
      ...state,
      router,
      routerList,
      selected,
    };
  },
});
</script>

<style scoped>
.left {
  width: 60px;
  float: left;
  background: #000;
  user-select: none;
}
.main {
  height: calc(100vh - 60px);
  overflow-x: hidden;
  overflow-y: scroll;
}
.main::-webkit-scrollbar {
  display: none;
}
</style>